<template>
	<view class="page flex" :style="{ '--fss': app.theme.fss() }">
		<common-header :background="`rgba(33,33,33,${scrollTop / 100})`">
			<template #center>
				<view class="centerView flex">
					<view class="item" @tap="tab.index = index" :class="tab.index === index ? 'active' : ''" v-for="(item, index) in tab.list">{{ item.name }}</view>
				</view>
			</template>
		</common-header>
		<swiper class="swiper" @change="tab.index = $event.detail.current" :current="tab.index">
			<swiper-item class="swiperItem" v-for="(item, index) in tab.list">
				<view class="main">
					<template v-if="index === 0">
						<view class="textareaView">
							<textarea
								class="textarea"
								:placeholder="'请输入提示词，例如：这是一首写给我的女友何燕燕，祝她28岁生日快乐\n\n每次会生成2首歌曲供您选择'"
								:adjust-position="false"
								placeholder-style="color: rgba(255,255,255,0.5);"
								:maxlength="item.maxLength"
								v-model="item.content"
							></textarea>
							<view class="countFlex flex">
								<view class="aiView flex">
									<view class="countView flex">
										<text class="has">{{ item.content.length }}</text>
										<text class="all">/ {{ item.maxLength }}</text>
									</view>
								</view>
								<view class="btn">粘贴</view>
								<view class="clear">清空</view>
							</view>
						</view>
						<view class="btnView">
							<view class="head flex">
								<image src="/static/img/lock_page.png" mode="aspectFill" class="image"></image>
								<text class="text ell">生成音乐</text>
							</view>
							<view class="foot">还可试用1次</view>
						</view>
					</template>
					<template v-if="index === 1">
						<view class="textareaView">
							<textarea
								class="textarea"
								:placeholder="'请直接输入歌词，歌词段落务必使用换行分割，建议使用AI帮您想歌词\n\n每次会生成2首歌曲供您选择'"
								:adjust-position="false"
								placeholder-style="color: rgba(255,255,255,0.5);"
								:maxlength="item.maxLength"
								v-model="item.content"
							></textarea>
							<view class="countFlex flex">
								<view class="aiView flex">
									<view class="left flex" @tap="aiLyrics(item)" v-if="item.content.length <= 0">
										<image src="/static/img/scholar_lord_entry.png" mode="aspectFill" class="image"></image>
										<text class="text">AI想歌词</text>
									</view>
									<view class="countView flex">
										<text class="has">{{ item.content.length }}</text>
										<text class="all">/ {{ item.maxLength }}</text>
									</view>
								</view>
								<view class="btn">粘贴</view>
								<view class="clear">清空</view>
							</view>
							<view class="load flex" v-if="item.lyricsLoad">
								<loading></loading>
							</view>
						</view>
						<view class="btnView">
							<view class="head flex">
								<image src="/static/img/lock_page.png" mode="aspectFill" class="image"></image>
								<text class="text ell">生成音乐</text>
							</view>
							<view class="foot">还可试用1次</view>
						</view>
						<view class="otherView">
							<view class="smallH3 ell">风格选择</view>
							<view class="styleView flex">
								<view class="item flex active">
									<text class="text ell">随机</text>
								</view>
								<view class="item flex">
									<text class="text ell">流行音乐</text>
								</view>
								<view class="item flex">
									<text class="text ell">摇滚音乐</text>
								</view>
								<view class="item flex">
									<text class="text ell">民谣</text>
								</view>
								<view class="item flex">
									<text class="text ell">电子</text>
								</view>
								<view class="item flex">
									<text class="text ell">舞曲</text>
								</view>
							</view>
						</view>
					</template>
					<footer-bar></footer-bar>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<alert ref="alertRef" />
</template>

<script setup>
	import { ref, onMounted, inject } from "vue";
	import {  onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	const app = inject('app');
	
	/* 变量区域 */
	// 滚动位置
	const scrollTop = ref(0);
	
	// 通用弹窗组件
	const alertRef = ref();
	
	// tab
	const tab = ref({
		index: 0,
		list: [
			{
				name: "简易模式",
				content: "",
				maxLength: 200,
				lyricsLoad: false,
			},
			{
				name: "自定义",
				content: "",
				maxLength: 200,
				lyricsLoad: false,
			}
		]
	});
	
	
	/* 方法区域 */
	// 自定义模式里面的AI想歌词
	function aiLyrics(item){
		alertRef.value.open({
			content: "你想要创作什么样的歌词呢？",
			placeholder: "例如：给我兄弟写一首安慰的歌",
			defaultValue: "",
			maxLength: 100,
			success(res) {
				if (res.confirm) {
					item.lyricsLoad = true;
					setTimeout(() => {
						item.lyricsLoad = false;
						item.content = res.value;
					}, 2500);
				}
			}
		});
	}
	
	// 页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
</script>

<style lang="scss" scoped>
	.page{
		width: 100%;
		overflow: hidden;
		height: 100vh;
		background: url("/static/img/indexColor.png")no-repeat center top;
		background-size: contain;
		position: relative;
		flex-direction: column;
		&:after{
			position: absolute;
			right: -100rpx;
			top: -100rpx;
			background: url("/static/img/icon_template3_cover.png")no-repeat center right;
			background-size: cover;
			width: 420rpx;
			height: 420rpx;
			content: "";
			opacity: 0.2;
			filter: blur(20rpx);
		}
		.centerView{
			flex-direction: row;
			align-items: center;
			justify-content: center;
			flex: 1;
			width: 0;
			.item{
				margin-right: 60rpx;
				line-height: 57rpx;
				text-align: center;
				font-weight: normal;
				font-size: calc(26rpx * var(--fss));
				color: rgba(255,255,255,0.65);
				font-style: italic;
				transition: 0.2s all;
				&.active{
					font-weight: bold;
					font-size: calc(28rpx * var(--fss));
					color: #FFF;
					font-style: normal;
				}
				&:nth-last-child(1){
					margin-right: 0;
				}
			}
		}
		.swiper{
			flex: 1;
			height: 0;
			position: relative;
			z-index: 2;
			.swiperItem{
				height: 100%;
				width: 100%;
				.main{
					padding: 0 $padding;
					.textareaView{
						border-radius: 22rpx;
						padding: 30rpx 30rpx 30rpx 30rpx;
						backdrop-filter: blur(30rpx);
						overflow: hidden;
						position: relative;
						background: linear-gradient(45deg, rgba(204, 221, 255, .04), rgba(204, 221, 255, .08));
						@keyframes rotate {100% {transform: rotate(1turn);}}
						&::before {
						    content: '';
						    position: absolute;
						    z-index: -2;
						    left: -50%;
						    top: -50%;
						    width: 200%;
						    height: 200%;
						    background-color: rgba(255,255,255,0.02);
						    background-repeat: no-repeat;
						    background-position: 0 0;
						    background-image: conic-gradient(transparent, $background, transparent 30%);
						    animation: rotate 4s linear infinite;
						}
						&::after {
						    content: '';
						    position: absolute;
						    z-index: -1;
						    left: 2px;
						    top: 2px;
						    width: calc(100% - 4px);
						    height: calc(100% - 4px);
						    background: #2a2b2d;
						    border-radius: 20rpx;
						}
						.textarea{
							font-size: calc(28rpx * var(--fss));
							line-height: 1.55;
							color: #FFF;
							width: 100%;
							height: 28rpx * 1.55 * 8;
							overflow-y: auto;
						}
						.countFlex{
							flex-direction: row;
							align-items: center;
							justify-content: flex-end;
							padding: 0 5rpx 0 0;
							margin-top: 10rpx;
							.aiView{
								flex-direction: row;
								align-items: center;
								flex: 1;
								width: 0;
								margin-right: 30rpx;
								.left{
									padding: 9rpx 22rpx 9rpx 15rpx;
									border-radius: 12rpx;
									background: rgba(255,255,255,0.05);
									flex-direction: row;
									align-items: center;
									transition: 0.2s all;
									margin-right: 30rpx;
									&:active{
										background: rgba(255,255,255,0.03);
									}
									.image{
										width: 42rpx;
										height: 42rpx;
									}
									.text{
										margin-left: 13rpx;
										font-weight: bold;
										color: #FFF;
										font-size: calc(24rpx * var(--fss));
									}
								}
								.countView{
									flex-direction: row;
									align-items: center;
									flex: 1;
									width: 0;
									.has{
										font-size: calc(26rpx * var(--fss));
										font-weight: bold;
										color: #FFF;
									}
									.all{
										font-size: calc(24rpx * var(--fss));
										margin-left: 10rpx;
										color: rgba(255,255,255,0.5);
									}
								}
							}
							.btn{
								margin-left: 25rpx;
								font-size: calc(25rpx * var(--fss));
								color: rgba(255,255,255,0.8);
								transition: 0.2s all;
								&:active{
									opacity: 0.8;
								}
							}
							.clear{
								margin-left: 40rpx;
								font-size: calc(25rpx * var(--fss));
								color: rgba(255,255,255,0.8);
								transition: 0.2s all;
								&:active{
									opacity: 0.8;
								}
							}
						}
						.load{
							position: absolute;
							left: 2px;
							top: 2px;
							right: 2px;
							bottom: 2px;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							background: #2a2b2d;
							border-radius: 20rpx;
						}
					}
					.btnView{
						transition: 0.2s all;
						margin: 45rpx auto 0 auto;
						border-radius: 20rpx;
						position: relative;
						overflow: hidden;
						&:active{
							opacity: 0.9;
						}
						.head{
							flex-direction: row;
							align-items: center;
							justify-content: center;
							height: 92rpx;
							background: $background;
							.image{
								width: 40rpx;
								height: 40rpx;
								margin-right: 20rpx;
							}
							.text{
								color: #000;
								font-size: calc(30rpx * var(--fss));
								font-weight: bold;
							}
						}
						.foot{
							font-size: calc(20rpx * var(--fss));
							background: #09bd8d;
							color: rgba(255,255,255,1);
							text-align: center;
							line-height: 1.3;
							position: absolute;
							right: 0;
							top: 0;
							padding: 0 15rpx 0 15rpx;
							border-radius: 0 0 0 30rpx;
						}
						&:after{
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: linear-gradient(100deg, rgba(0,0,0,0) 40%, rgba(83,137,106,0.08) 50%, rgba(0,0,0,0) 60%);
							background-size: 200% 100%;
							background-position-x: 120%;
							animation: skeleton 1.5s ease-in-out infinite;
							@keyframes skeleton {
								to{
									background-position-x: -20%;
								}
							}
						}
					}
					.otherView{
						margin-top: 80rpx;
						.smallH3{
							line-height: 70rpx;
							font-size: calc(26rpx * var(--fss));
							color: rgba(255,255,255,0.85);
							font-weight: bold;
						}
						.styleView{
							flex-direction: row;
							flex-wrap: wrap;
							margin-top: 5rpx;
							.item{
								flex-direction: row;
								align-items: center;
								justify-content: center;
								margin-right: 22rpx;
								margin-bottom: 22rpx;
								width: calc((100% - 22rpx * 2) / 3);
								background: rgba(255,255,255,0.06);
								padding: 15rpx;
								border-radius: 20rpx;
								border: 2rpx solid rgba(255,255,255,0);
								position: relative;
								overflow: hidden;
								transition: 0.2s all;
								&:active{
									opacity: 0.8;
								}
								&:nth-child(3n){
									margin-right: 0;
								}
								.text{
									font-size: calc(26rpx * var(--fss));
									color: rgba(255,255,255,0.6);
									position: relative;
									z-index: 2;
								}
								&.active{
									background: rgba(255,255,255,0.13);
									border-color: rgba(255,255,255,0.15);
									.text{
										font-weight: bold;
										color: rgba(255,255,255,1);
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>